import React from 'react'
import { ExclamationCircleOutlined } from '@ant-design/icons';
import { Button, Pagination, Modal, message } from "antd";
import IconMap from '../IconMap';
import classnames from "classnames";
import { useSelector, useDispatch } from "umi";
import $http from "@/services"
import "./index.less"
export default function TableHeader({
    total,//总数
    page,//当前页码
    size,//每页显示多少条
    changeCurrentPage,//修改页数函数
    interfaceDelMethod,//事件函数
    openAdd,//打开创建页面
    getNewDatas,//Table重新获取内容
}) {
    const { CollArrow, ids } = useSelector(state => state.common);
    const dispatch = useDispatch();
    const deleteFn = () => {
        if (ids.length == 0) return message.warning("并未选中要删除的目标！", 1);
        Modal.confirm({
            title: '温馨提示',
            icon: <ExclamationCircleOutlined />,
            content: '确定要删除选中的数据么?',
            okText: "确认",
            onOk: _deleteIds,
            cancelText: '取消',
        });
    }
    const _deleteIds = () => {
        const { data, msg, code } = $http[interfaceDelMethod]({ ids });
        console.log(data, msg, code)
        if (msg === '删除失败,ID值错误' || code) return message.error(msg);
        message.success("删除数据成功!", 1);
        dispatch({
            type: "common/setdeleteIds",
            ids: []
        })
        getNewDatas();

    }
    return (
        <div className={classnames('table-container', { 'big-style': CollArrow })}>
            <div className="table-button">
                <Button
                    className="mr-10"
                    size="small"
                    shape="round"
                    icon={IconMap.add}
                    onClick={openAdd}
                >
                    创建
                </Button>
                <Button
                    size="small"
                    shape="round"
                    danger
                    onClick={deleteFn}
                    icon={IconMap.del}>
                    批量删除
                </Button>
            </div>
            <div className="page-container">
                <Pagination
                    simple
                    defaultCurrent={page}
                    pageSize={size}
                    onChange={changeCurrentPage}
                    current={page}
                    total={total} />
                <span>共计{total} 条记录</span>
            </div>
        </div>
    )
}
